import classNames from "classnames"
import * as React from "react"
import { HTMLAttributes } from "react"
import { componentClassName } from "../style"
import "./index.scss"

interface SpaceProps extends HTMLAttributes<HTMLDivElement> {
  direction?: "vertical" | "horizontal"
  size?: "sm" | "md" | "lg"
}

export default function Space(props: SpaceProps) {
  const { direction = "horizontal", size = "md", children } = props
  const count = React.Children.count(children)
  const lastIndex = count - 1
  const items = React.Children.map(children, (item, index) =>
    <div key={index} className={classNames(componentClassName("space-item"), {
      [componentClassName("space-item-sm")]: lastIndex !== index && size === "sm",
      [componentClassName("space-item-md")]: lastIndex !== index && size === "md",
      [componentClassName("space-item-lg")]: lastIndex !== index && size === "lg",
    })}>{item}</div>)

  return (<div className={classNames(componentClassName("space"), {
    [componentClassName("space-vertical")]: direction === "vertical",
  })}>
    {items}
  </div>)

}
